<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
		    margin-left: 500px;	
		}
		.today{
            margin-left: 52px;
            margin-top:-138px;
            color: #F9F0CF;
            letter-spacing: 2px;
            font-weight: bold;
            z-index: 9999;
            position: absolute;
        }

        #day{
            margin-left: 30px;
            margin-top:-115px;
            font-size: 80px;
            z-index: 9999;
            position: absolute;
        }

        #msg{
            margin-left: 26px;
            margin-top:-115px;
            font-size: 50px;
            font-weight: bold;
            color: #dddddd;
            z-index: 9999;
            position: absolute;
        }
    </style>
</head>
<body>
    <div>
        <img src="./img/cald.png">
        <div id="today" class="today"></div>
        <div id="day"></div>
    </div>

    <div>
        <img src="./img/clock.png" alt="">
        <div id="msg"></div>
    </div>
	//179000529 张书豪
<script>
    weekDay();
    function weekDay(){
    let today = document.querySelector("#today");
    let dayDiv = document.querySelector("#day");
    let a = ["日", "一", "二", "三", "四", "五", "六"];
    //星期几
    let week = new Date().getDay();
    //几号
    let day = new Date().getDate();
    let weekDay = "星期" + a[week];
    today.innerHTML = weekDay;
    dayDiv.innerHTML = dateFilter(day);
    setTimeout(weekDay,1000);
    }

    function dateFilter(date){ //值小于10时，在前面补0
        if(date < 10){
          return "0"+date;
        }
       return date;
    }

    getTime();
    function getTime(){
        let msg = document.querySelector("#msg");
        let myday = new Date();
        let H = myday.getHours();
        let M = myday.getMinutes();
        let S = myday.getSeconds();
        let str = `${dateFilter(H)}` + ":" + `${dateFilter(M)}` + ":" + `${dateFilter(S)}`;
        msg.innerHTML = str;
        setTimeout(getTime,1000);
    }
</script>
</body>
</html>